<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>前后端交互</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
    前后端数据交互
    
    开会讨论（项目完成周期） -- 原型图
        UI出图（前两周）
        前端（前两天，确定技术方向  喝茶）
            等设计图-> 实现
            根据接口文档发请求
            与后台联调接口

        后端 -> 项目接口（API文档）
            接口文档：
                + 数据地址（URL）
                + 请求类型（GET/POST）
                + 请求参数（用于确定需要的数据/提交给后台的数据）
                + 请求参数类型设置（请求头设置）
                + 返回数据
                + 返回数据类型
    
    电影列表
    <script type="text/javascript">
        var host = "http://www.bufantec.com"

        // 1. 声明实例
        var xhr = new XMLHttpRequest();
        // 2. 设置返回参数类型
        xhr.responseType = "json";
        // 3. 设置请求过程监听函数
        xhr.onreadystatechange = function (){
            // 如果请求过程完成且HTTP状态为成功
            if(xhr.readyState == 4 && xhr.status == 200){
                console.log(xhr.response);
                for(var i = 0; i < xhr.response.data.list.length; i ++){
                    var imageEle = document.createElement("img");
                    imageEle.src = xhr.response.data.list[i].small;
                    document.body.append(imageEle);
                    imageEle.onerror = function (){
                        console.log("图片加载失败");
                    }
                }
                var movieDetail = xhr.response.data.list[5];
                console.log("电影图片", movieDetail.small); // medium large
                console.log("电影名称", movieDetail.title); // medium large
                console.log("电影时长", movieDetail.longtime); // medium large
                console.log("电影类型", movieDetail.genres); // medium large
                console.log("电影平均分", movieDetail.rating_average); // medium large
                console.log("电影导演", movieDetail.director); // medium large
                console.log("电影编剧", movieDetail.scriptwriter); // medium large
                console.log("电影ID", movieDetail.mId); // medium large

                // 电影详情中： title标题  summary简介
            }
        }
        // 4. 设置请求相关内容
        xhr.open("GET", host + "/api/douban/movie/in_theaters?start=1&limit=10");
        // 5. 发送请求
        xhr.send(null);

    </script>
</body>
</html>